<template>
  <div class="home_cell statusBar second">
    <section class="devInfo">
      <ul class="infoList">
        <li class="infoItem" v-for="item,idx in dataList" :key="idx">
          <div class="infoWrap">
            <p class="infoNum">
              <span class="number">{{item.number}}</span>
              <span class="unit">{{item.unit}}</span>
            </p>
            <p class="infoName">{{item.infoName}}</p>
          </div>
          <div class="infoLine" v-if="idx!=(dataList.length-1)"></div>
        </li>
        
        <!-- <li class="infoItem">
          <div class="infoWrap">
            <p class="infoNum">
              <span class="number">43.9</span>
              <span class="unit">%</span>
            </p>
            <p class="infoName">今日入座时长占比</p>
          </div>
        </li> -->
      </ul>
    </section>
  </div>
</template>
  <script>
import { mapState } from "vuex";
export default {
  name: "HomeStatus",
  data(){
    return{
     
    }
  },
  props: {
    dataList: {
      type: Array,
    },
  },
  computed: {
    ...mapState(["devImg", "logo"]),
  },
};
</script>
  
  <style lang='less' scoped>
.second {
  width: calc(100% - 2.4rem);
  margin: 0 1.2rem;
  color: rgba(0, 0, 0, 0.9);
  background-color: #fff;
  border-radius: 1.6rem;
  opacity: 1;
  position: relative;
  height: 10.4rem;
  margin-bottom: 1.2rem;
  border-radius: 1.6rem;
}

.van-swipe {
  width: 100%;
  height: 8.8rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 8.8rem;
  text-align: center;
  // background-color: #39a9ed;
}

/deep/.van-swipe__indicators {
  bottom: 0 !important;
}

/deep/i.van-swipe__indicator.van-swipe__indicator--active {
  width: 1rem;
  height: 0.6rem;
  border-radius: 2.5rem;
  background-color: var(--xwq_color) !important;
}

/deep/.van-swipe__indicator {
  background: #6c6363;
  bottom: 0.8rem;
}

// .van-swipe__indicator{
// width: 1rem;
// height: 0.6rem;
// border-radius: 35%;
// }
.dark {
  .home_cell {
    background: #303030;
    color: rgba(255, 255, 255, 0.86);

    .dev {
      color: #ffff F;
    }
  }
}

.devInfo {
  // width: 100%;
  // margin-top:1.2rem;
  // height: 8.8rem;
  // border-radius: 1.6rem;
  // background: white;
  // position: relative;
}

.dark .devInfo {
  background: #303030;
}

.devInfo .infoList {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  display: flex;
  text-align: center;
}

.devInfo .infoList .infoItem {
  width: calc(((100% - 0.6rem) / 3));
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.devInfo .infoList .infoItem .infoWrap {
  padding: 0 0.4rem;
  width: 100%;
}

.devInfo .infoList .infoItem .infoWrap .infoNum {
  align-self: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0;
}

.devInfo .infoList .infoItem .infoWrap .infoNum .number {
  font-size: 2rem;
  padding-right: 0.2rem;
  color: rgba(0, 0, 0, 0.9);
}

.dark .devInfo .infoList .infoItem .infoWrap .infoNum .number {
  color: rgba(255, 255, 255, 0.86);
}

.devInfo .infoList .infoItem .infoWrap .infoNum .unit {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.6);
}

.dark .devInfo .infoList .infoItem .infoWrap .infoNum .unit {
  color: rgba(255, 255, 255, 0.6);
}

.devInfo .infoList .infoItem .infoWrap .infoName {
  margin-top: 0.2rem;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.6);
}

.dark .devInfo .infoList .infoItem .infoWrap .infoName {
  color: rgba(255, 255, 255, 0.6);
}

.devInfo .infoList .infoLine {
  width: 0.1rem;
  height: 3.2rem;
  align-self: center;
  background: rgba(0, 0, 0, 0.2);
  // transform: scaleX(0.25);
}

.dark .infoList .infoLine {
  background: rgba(255, 255, 255, 0.2);
}

.devInfo .infoList .line:last-child {
  border-right: none;
}
</style>
  